<template>
  <BorderBox
    :title="title"
    :headerBottom="false"
    :wrapperStyle="{
      width: 'calc((100% - 32px) / 3)',
      height: '170px',
      margin: '16px 0',
    }"
    :styleText="{ height: '75%' }"
  >
    <template #main_info>
      <div class="flex_between_aligncenter comment_info">
        <ga-comment author="123" content="高危">
          <template #avatar>
            <ga-avatar :size="24">
              <img
                alt="avatar"
                src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
              />
            </ga-avatar>
          </template>
        </ga-comment>
        <ga-comment author="123" content="中危">
          <template #avatar>
            <ga-avatar :size="24">
              <img
                alt="avatar"
                src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
              />
            </ga-avatar>
          </template>
        </ga-comment>
        <ga-comment author="123" content="低危">
          <template #avatar>
            <ga-avatar :size="24">
              <img
                alt="avatar"
                src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
              />
            </ga-avatar>
          </template>
        </ga-comment>
      </div>
    </template>
  </BorderBox>
</template>

<script setup>
import { ref } from "vue";
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
});
</script>

<style lang="scss" scoped>
:deep(.garco-comment) {
  margin: 0;
  align-items: center;
  display: flex;
}
:deep(.garco-comment-author) {
  color: #081641;
  font-size: 18px;
}
:deep(.garco-comment-content) {
  color: #7d899d;
  font-size: 12px;
}
.comment_info {
  height: 100%;
  padding: 0 32px;
}
</style>
